<template>
	<view class="container" style="max-width: 540px;margin: 0 auto;">
		<view class="title">
			<image :src="equityObj.bannerImg" mode="widthFix"></image>
			<text class="info">{{equityObj.title}}</text>
		</view>
		<view class="content">
			<view class="introduce">
				权益详情
			</view>
			<view class="introduce">
				<text class="guishu">所属商户</text>
				{{equityObj.name}}
			</view>
			<view class="detile">
				<view class="subtitle">
					权益内容
				</view>
				<view class="subtitle">
					权益说明：
				</view>
				<view class="yaoqiu">
					每月可领取一次；
				</view>
				<view class="yaoqiu">
					此权益仅对会员用户发放，领取时请输入与开通会员一致的号码；如中途取消业务或因号码问题导致权益下发不成功，则不予不发；
				</view>
				<view class="yaoqiu">
					如您的会员手机号未注册过{{equityObj.name}}，权益下发后会自动默认注册并下发权益；如您已经开通过会员，领取后在原会员基础上自动顺延至次月；
				</view>
				<view class="yaoqiu">
					权益发放后可登录{{equityObj.name}}使用，不可转赠，仅限会员用户使用。
				</view>
				<view class="tupian" v-for="(item,index) in equityObj.images" :key="index">
					<image :src="item" mode="widthFix"></image>
				</view>
				
			</view>
			
		</view>
		<view class="lingqu" @click="lingqu(equityObj.equityId)">
			领取
		</view>
	</view>

</template>

<script setup>
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	
	const equityObj =  ref()
	const equityId = ref()
	const equityList = ref([
		{
			"equityId": "100898",
			"title": "价值25元哔哩哔哩大会员月卡",
			"name": "哔哩哔哩",
			"images": ["/static/image/bili/1.jpg","/static/image/bili/2.jpg","/static/image/bili/3.jpg"],
			"bannerImg": "/static/image/bili/哔哩哔哩.jpg"
		},
		{
			"equityId": "100920",
			"title": "价值30元的优酷VIP月卡",
			"name": "优酷",
			"images": ["/static/image/youku/1.jpg","/static/image/youku/2.jpg","/static/image/youku/3.jpg"],
			"bannerImg": "/static/image/youku/优酷.jpg"
		},
		{
			"equityId": "100276",
			"title": "价值15元饿了么会员月卡",
			"name": "饿了么",
			"images": ["/static/image/elm/1.jpg"],
			"bannerImg": "/static/image/elm/饿了么.png"
		},
		{
			"equityId": "100811",
			"title": "价值30元芒果TVPC影视月卡",
			"name": "芒果TV",
			"images": ["/static/image/mangguo/1.jpg","/static/image/mangguo/2.jpg","/static/image/mangguo/3.jpg","/static/image/mangguo/4.jpg","/static/image/mangguo/5.jpg"],
			"bannerImg": "/static/image/mangguo/芒果.jpg"
		},
		{
			"equityId": "100752",
			"title": "价值30元腾讯视频VIP月卡",
			"name": "腾讯视频",
			"images": ["/static/image/tengxun/1.png","/static/image/tengxun/2.png","/static/image/tengxun/3.png"],
			"bannerImg": "/static/image/tengxun/腾讯.png"
		},
		{
			"equityId": "100075",
			"title": "价值20元PP视频会员月卡",
			"name": "PP视频",
			"images": ["/static/image/pptv/1.jpg","/static/image/pptv/2.jpg"],
			"bannerImg": "/static/image/pptv/pptv.jpg"
		},
		{
			"equityId": "100148",
			"title": "价值25元蜻蜓FM会员月卡",
			"name": "蜻蜓FM",
			"images": ["/static/image/qingting/1.jpg","/static/image/qingting/2.jpg","/static/image/qingting/3.jpg"],
			"bannerImg": "/static/image/qingting/蜻蜓.jpg"
		},
		{
			"equityId": "20049",
			"title": "价值25元喜马拉雅VIP会员月卡",
			"name": "喜马拉雅",
			"images": ["/static/image/ximalaya/1.jpg","/static/image/ximalaya/2.jpg","/static/image/ximalaya/3.jpg"],
			"bannerImg": "/static/image/ximalaya/喜马拉雅.jpg"
		},
		{
			"equityId": "100054",
			"title": "价值20元搜狐视频会员月卡",
			"name": "搜狐",
			"images": ["/static/image/souhu/1.jpg","/static/image/souhu/2.jpg"],
			"bannerImg": "/static/image/souhu/搜狐.jpg"
		},
		{
			"equityId": "100119",
			"title": "价值25元知乎盐选会员月卡",
			"name": "知乎",
			"images": ["/static/image/zhihu/1.jpg","/static/image/zhihu/2.jpg","/static/image/zhihu/3.jpg"],
			"bannerImg": "/static/image/zhihu/知乎.jpg"
		}
	])
	onLoad((options) => {
		equityId.value = options.equityId;
		console.log(equityId.value)
		
		for(let item of equityList.value){
			if(item.equityId==options.equityId){
				equityObj.value = item;
			}
		}
		console.log(equityObj.value)
		console.log(equityObj.value.name)
	})
	
	const lingqu = (equityId) => {
		console.log(equityId);
		proxy.sjuRequest.request("/api/equity/getEquity/"+proxy.sjuConfig.appInfo.appId, 'post',{
				"mobile":proxy.sjuLogin.getValue("miaoMaGJMobile"),
				"equityId":equityId
			}).then(
			res => {
				if (res) {
					if (res.code == "0000") {
						proxy.sjuAlert.showConfirm("领取成功，请使用该手机号登录"+equityObj.value.name+"APP使用");
					} else{
						proxy.sjuAlert.showInfo(res.msg);
					}
		
				}
		
	
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		width:100%;
		height: auto;
		.title{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding:10px;
			box-sizing: border-box;
			border-bottom:10px solid #f3f3f3;
			image{
				width: 20%;
				
			}
			.info{
				padding-left: 10px;
				box-sizing: border-box;
			}
			
		}
		.lingqu{
			width:50%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #fff;
			background: #07c160;
			border-radius: 10px;
			position: fixed;
			left: 50%;
			bottom:50px;
			transform: translateX(-50%);
		}
		.content{
			padding:20px 15px;
			box-sizing: border-box;
			.introduce{
				display: flex;
				flex-direction: column;
				// height:40px;
				line-height: 30px;
				font-size: 16px;
				font-weight: bold;
				border-bottom:1px solid #f3f3f3;
				.guishu{
					font-size: 14px;
					color: #999;
				}
			}
			.detile{
				.subtitle{
					font-size: 14px;
					font-weight: bold;
					line-height: 30px;
				}
				.yaoqiu{
					position: relative;
					padding-left: 20px;
					margin-bottom:3px;
					
				}
				.yaoqiu:before{
					display: block;
					content:' ';
					width:5px;
					height: 5px;
					border-radius: 50%;
					background: #000;
					position: absolute;
					top:10px;
					left:3px
					
				}
				.tupian{
					image{
						width: 100%;
					}
				}
				
			}
		}
		
	}

</style>